<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>节点获取</title>
    <script src="../../../static/kaige/js/szload.js"></script>
    <style>
        .layui-table .title-input {
            width: 160px;
            height: 28px;
            line-height: 28px;
            margin-left: 5px;
            border: 1px dashed #ccc
        }

        .layui-table .menu_id-input,
        .layui-table .p_menu_id-input {
            width: 150px;
            height: 28px;
            line-height: 28px;
            margin-left: 5px;
            border: 1px dashed #ccc
        }

        body td .color-spl {
            color: #f0f0f0;
            font-size: 10px;
        }

        /* 使得下拉框与单元格刚好合适 */
        body td .layui-form-select {
            margin-top: -6px;
            margin-left: -15px;
            margin-right: -15px;
        }

        .red {
            color: red;
        }

        body .layui-elem-quote {
            margin-bottom: 0;
        }

        .rightNodeTool {
            position: absolute;
            z-index: 98;
            top: 5px;
            right: 5px;
            width: 240px;
            height: 35px;
            line-height: 35px;
        }

        .yesedit {
            color: #2ebe1b;
            font-size: 16px;
            font-weight: bold;
        }

        .green20 {
            font-size: 20px;
            color: green;
        }
    </style>
</head>

<body>
    <div class="kaige-body">
        <div class="rightNodeTool">
            <button type="button" id="clear_node" class='layui-btn layui-btn-sm pull-right'>
                <i class="iconfont icon-clear-l"></i> 清理无效节点
            </button>
            <button type="button" id="abnormal_node" class='layui-btn layui-btn-sm pull-right'
                style="margin-right: 5px;"><i class="fa fa-warning"></i> 查看异常节点</button>
        </div>
        <div class="layui-tab layui-tab-card" style="margin-top:0;">
            <ul class="layui-tab-title" id="node_ui"></ul>
            <div class="layui-tab-content" style="padding:5px;" id="content_div"></div>
        </div>
    </div>
    <script type="text/javascript">
        var menuTable = {
            nodeTable: [],
            nodeCount: [],
            nodeData: []
        };
        load_init_js(function () {
            layui.use(['layer', 'element', 'table', 'form'], function () {
                var layer = layui.layer, element = layui.element, table = layui.table, form = layui.form;

                //从数据源中获取本行数据(id,数据源)
                function getTd(d, b) {
                    if (typeof (b) !== 'object') return false;
                    for (var c = [], a = 0; a < b.length; a++)if (b[a].id == d) { c = b[a]; break }
                    return c
                };

                // 取数据
                szoa.get('/sys.menu/index', function (res) {
                    // tab 标题
                    if (res.groups) {
                        var $groups = res.groups;
                        var $nodes = res.nodes;
                        var li_html = '', item_html = '';
                        var titleobj = $('#node_ui');
                        var contentobj = $('#content_div');
                        titleobj.html('');
                        contentobj.html('');
                        for (var i in $groups) {
                            titleobj.append('<li>' + ($groups[i].node.name || '<span class="color-desc">未配置名称</span>') + '(' + i + ')</li>');
                            item_html += '<div class="layui-tab-item layui-form" lay-filter="nodeForm_' + i + '"><table class="layui-table" id="nodeTable_' + i + '" lay-filter="nodeTable_' + i + '">';
                            if (typeof ($nodes) !== 'object') {
                                item_html += '<p class="help-block text-center well">没 有 记 录 哦！</p>';
                                item_html += '</table></div>';
                                contentobj.append(item_html);
                            } else {
                                item_html += '</table></div>';
                                contentobj.append(item_html);
                                var nowtablename = 'nodeTable_' + i;

                                for (var jj in $groups[i].list) {
                                    $groups[i].list[jj].lay = i;
                                }

                                table.render({
                                    elem: '#' + nowtablename
                                    , escape: false
                                    , cols: [[
                                        { field: 'spl', title: 'SPL', hide: true }
                                        , { field: 'lay', title: 'LAY', hide: true }
                                        , { field: 'is_sys', title: '物理', hide: true }
                                        , { field: 'is_lock', title: '锁定', hide: true }
                                        , { field: 'id', title: 'ID', width: 60 }
                                        , { field: 'type', width: 80, templet: '#type_td', sort: true, title: '类别' }
                                        , { field: 'node', width: 400, templet: '#node_td', sort: true, title: '节点' }
                                        , { field: 'name', edit: 'text', width: 130, sort: true, title: '名称' }
                                        , { field: 'menu_id', edit: 'text', width: 150, sort: true, title: '菜单ID' }
                                        , { field: 'p_menu_id', edit: 'text', width: 120, sort: true, title: '父菜单ID' }
                                        , { field: 'menu_type', width: 90, templet: '#menu_type_td', sort: true, title: '类型' }
                                        , { field: 'is_menu', width: 80, align: 'center', templet: '#is_menu_td', sort: true, title: '菜单' }
                                        , { field: 'is_auth', width: 80, align: 'center', templet: '#is_auth_td', sort: true, title: '权限' }
                                        , { field: 'is_login', width: 80, align: 'center', templet: '#is_login_td', sort: true, title: '登录' }
                                        , { field: 'status', width: 80, align: 'center', templet: '#status_td', sort: true, title: '启用' }
                                        , { field: 'pnode', width: 120, hide: true, title: '父节点' }
                                    ]]
                                    , data: $groups[i].list
                                    , height: 'full-85'
                                    , page: false
                                    , limit: ($groups[i].list).length
                                    , done: function (res, curr, count) {
                                        menuTable.nodeData[nowtablename] = res.data;
                                    }
                                });

                                //监听单元格
                                table.on('edit(' + nowtablename + ')', function (obj) {
                                    var that = $(this), updata = {};
                                    if (obj.data.is_lock == 1) {
                                        var old = that.prev().text();//旧值
                                        that.val(old);//重新掰回来
                                        layer.msg('已经锁定，编辑无效');
                                        return false;
                                    }
                                    updata = {
                                        id: obj.data.id,
                                        field: obj.field,
                                        value: obj.value,
                                        node: obj.data.node
                                    };
                                    $.post('/sys.menu/updatefield', updata, function (res) {
                                        layer.msg(res.msg);
                                    });
                                });
                            }
                        }

                        $('.layui-tab ul.layui-tab-title li:first').trigger('click');
                        $('.layui-table-cell').find('.layui-form-select').each(function (index, elem) {
                            $(elem).parent().css('overflow', 'visible');
                        });
                        // 监听 所有 switch
                        var arr = ['is_auth', 'is_login', 'is_menu', 'status'];
                        $(arr).each(function (i, sval) {
                            form.on('switch(' + sval + ')', function (data) {
                                var that = $(data.elem);
                                var othat = $(data.othis);
                                var id = that.attr('data-id'), no = that.attr('data-lay'), old = that.attr('data-old');
                                var tdData = getTd(id, menuTable.nodeData['nodeTable_' + no]),
                                    reval = false, remsg = '';
                                1 == tdData.is_lock && sval != 'status' && ((reval = !0), (remsg = "已经锁定，编辑无效"));
                                if (reval) {
                                    //checkbox重新掰回来 不用再渲染卡机
                                    data.elem.checked ? (
                                        data.elem.checked = false
                                        , othat.removeClass('layui-form-onswitch').find('em').text('否')
                                    ) : (
                                        data.elem.checked = true
                                        , othat.addClass('layui-form-onswitch').find('em').text('是')
                                    );
                                    //layer.msg(remsg);
                                    layer.tips(remsg, othat[0], { tips: 2 });
                                    return !1;
                                }
                                var updata = {
                                    id: tdData.id,
                                    field: sval,
                                    value: data.elem.checked ? 1 : 0
                                };
                                $.post('/sys.menu/updatefield', updata, function (res) {
                                    // console.log(res);
                                    layer.tips(res.msg, othat[0], { tips: 2 });
                                });
                            });
                        });

                        //监听下拉框编辑
                        form.on('select(menu_type)', function (obj) {
                            var that = $(obj.elem),
                                othis = obj.othis,
                                THISCSS = 'layui-this',
                                no = that.attr('data-lay'),
                                id = that.attr('data-id'),
                                old = that.attr('data-value'),
                                title = othis.find('.layui-select-title'),
                                input = title.find('input'),
                                oldtext = ['无', '父菜单', '子菜单', '按钮', '接口', '系统'][old],
                                tableData = menuTable.nodeData['nodeTable_' + no];
                            tdData = getTd(id, tableData),
                                reval = false,
                                remsg = '';
                            1 == tdData.is_lock && ((reval = !0), (remsg = "已经锁定，编辑无效"));
                            if (reval) {
                                //select重新掰回来 不用再渲染卡机
                                input.val(oldtext);
                                othis.addClass(THISCSS);
                                othis.siblings().removeClass(THISCSS);
                                that.val(old).removeClass('layui-form-danger');
                                layer.tips(remsg, othis[0], { tips: 2 });
                                return !1
                            };
                            var updata = {
                                id: tdData.id,
                                field: 'menu_type',
                                value: obj.value
                            };
                            $.post('/sys.menu/updatefield', updata, function (res) {
                                layer.tips(res.msg, othis[0], { tips: 2 });
                            });
                        })

                    }
                });

                //清理无效
                $("#clear_node").on('click', function (e) {
                    var that = this;
                    $.get('/sys.menu/clear', function (res) {
                        layer.tips(res.msg, that, {
                            tips: 4, end: function () {
                                res.status && location.reload();
                            }
                        });
                    });
                });

                //查看异常节点
                $("#abnormal_node").on('click', function (e) {
                    layer.open({
                        id: 'menu_abnormal',
                        type: 2,
                        title: '查看异常节点',
                        content: szoa.client.path + '/pages/sys/menu/abnormal.html',
                        area: ['98%', '90%']
                    });
                });

            });
        });
    </script>
    <script type="text/html" id="node_td">
        <span class="color-spl">{{ d.spl }}</span>
        {{- d.is_sys == 1 ? '' : '<i class="fa fa-unlink" title="请选设置名称"></i>' }}
        {{- d.is_lock == 1 ? '<i class="fa fa-lock" title="已经锁定不允许编辑"></i> '+ d.node : '<span class="yesedit"><i class="fa fa-unlock-alt"></i>'+ d.node +'</span>' }}
    </script>
    <script type="text/html" id="is_auth_td">
        {{#  if(d.is_lock != 1){ }}
        <input type="checkbox" name="is_auth" value="1" data-id="{{ d.id }}" lay-skin="switch" lay-text="是|否" data-old="{{ d.is_auth }}" data-lay="{{ d.lay }}" lay-filter="is_auth" {{ d.is_auth == 1 ? 'checked' : '' }}/>
        {{#  } else { }}
        {{- d.is_auth==1?'<span class="layui-badge layui-bg-green">是</span>':'<span class="layui-badge layui-bg-gray">否</span>' }}
        {{#  } }}
    </script>
    <script type="text/html" id="is_menu_td">
        {{#  if(d.is_lock != 1){ }}
        <input type="checkbox" name="is_menu" value="1" data-id="{{ d.id }}" lay-skin="switch" lay-text="是|否"  data-old="{{ d.is_menu }}" data-lay="{{ d.lay }}" lay-filter="is_menu" {{ d.is_menu == 1 ? 'checked' : '' }}/>
        {{#  } else { }}
        {{- d.is_menu==1?'<span class="layui-badge layui-bg-green">是</span>':'<span class="layui-badge layui-bg-gray">否</span>' }}
        {{#  } }}
    </script>
    <script type="text/html" id="is_login_td">
        {{#  if(d.is_lock != 1){ }}
        <input type="checkbox" name="is_login" value="1" data-id="{{ d.id }}" lay-skin="switch" lay-text="是|否"  data-old="{{ d.is_login }}" data-lay="{{ d.lay }}" lay-filter="is_login" {{ d.is_login == 1 ? 'checked' : '' }}/>
        {{#  } else { }}
        {{- d.is_login==1?'<span class="layui-badge layui-bg-green">是</span>':'<span class="layui-badge layui-bg-gray">否</span>' }}
        {{#  } }}
    </script>
    <script type="text/html" id="status_td">
    <input type="checkbox" name="status" value="1" data-id="{{ d.id }}" lay-skin="switch" lay-text="是|否" data-old="{{ d.status }}" data-lay="{{ d.lay }}" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}/>
    </script>
    <script type="text/html" id="menu_type_td">
        {{#  if(d.is_lock != 1){ }}
            {{#  if(d.type == 'm'){ }}
            <span>系统</span>
            {{#  }else if(d.type == 'c'){ }}
                <select name="menu_type" lay-filter="menu_type" data-id="{{ d.id }}" data-value ="{{ d.menu_type }}" data-lay="{{ d.lay }}">
                    <option value="0" {{ d.menu_type == '0' ? 'selected' : '' }}>无</option>
                    <option value="1" {{ d.menu_type == '1' ? 'selected' : '' }}>父菜单</option>
                </select>
            {{#  }else if(d.type == 'a'){ }}
                <select name="menu_type" lay-filter="menu_type" data-id="{{ d.id }}" data-value ="{{ d.menu_type }}" data-lay="{{ d.lay }}">
                    <option value="0" {{ d.menu_type == '0' ? 'selected' : '' }}>无</option>
                    <option value="2" {{ d.menu_type == '2' ? 'selected' : '' }}>子菜单</option>
                    <option value="3" {{ d.menu_type == '3' ? 'selected' : '' }}>按钮</option>
                    <option value="4" {{ d.menu_type == '4' ? 'selected' : '' }}>接口</option>
                </select>
            {{#  } else { }}
            <span class="red">错误</span>
            {{#  } }}
        {{#  } else { }}
        <span class="layui-badge layui-bg-{{ ['gray','blue','green','cyan','orange','black'][d.menu_type] }}">{{ ['无','父菜单','子菜单','按钮','接口','系统'][d.menu_type] }}</span>
        {{#  } }}
    </script>
    <script type="text/html" id="type_td">
        {{- d.type=='m'? '<span class="layui-badge layui-bg-black">模块</span>':
        (d.type=='c'? '<span class="layui-badge layui-bg-blue">控制器</span>':
        (d.type=='a'?'<span class="layui-badge layui-bg-green">方法</span>':
        '<span class="layui-badge">错误</span>')) }}
    </script>
</body>

</html>